
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>K5G-C</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <style>
        .horizontal-button{
            text-align: center;
            margin-top: 15px;
        }
        .horizontal-button .button-common{
            font-size: 15px;
            font-weight: bold;
            text-align: center;
            color: #fff;
            background: #1A2B56;
            display: inline-block;
            height: auto;
            position: relative;
            padding: 6px 14px;
            text-decoration: none;
            border-radius: 4px;
            box-shadow: inset 0 2px 0 rgb(255 255 255 / 20%), inset 0 -2px 0 rgb(0 0 0 / 5%);
            /* border: solid 2px #aaaaaa; */
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="tit-heade">
        <div class="itemOne">
            <img src="./image/left.png" >
        </div>
        <div class="itemTwo">
            <div class="item-chil">
                <img src="./image/logoutOne.png">
            </div>
            <div class="item-chil">
                <a class="logout-btn" href="/action/logout">ログアウト</a>
            </div>
        </div>
    </div>  
    <div class="nav2">
        <div class="nav-item">
            <div id='x1' class="item" onclick="toPage('./home.html')">ホーム</div>
        </div>
        <div class="nav-item">
            <div id='x2' class="item no-act" onclick="toPage('./mobileData.html')">モバイルネットワーク</div>
        </div>
        <div class="nav-item">
            <div id='x3' class="item no-act" onclick="toPage('./wifi.html')">Wi-Fi設定</div>
            <div class="hide">
                <div>
                    <div id='x31' class="item1 no-act">wifi</div>
                    <div class="hide">
                        <div class="item2" id="wifi1" onclick="toPage('./wifi.html')">Wi-Fi</div>
                        <div class="item2" id="wifi2" onclick="toPage('./wifiList.html')">Wi-Fi 接続情報</div>
                        <div class="item2" id="wifi_list" onclick="toPage('./wifiManage.html')">接続デバイスの管理</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-item">
            <div id='x4' class="item no-act" onclick="toPage('./dhcp.html')">Ethernet設定</div>
            <div class="hide">
                <div>
                    <div id='x41' class="item1 no-act">DHCP固定割当設定</div>
                    <div class="">
                        <div class="item2" id="DHCP">DHCP固定割当設定</div>
                        <div class="item2" id="MAC">MAC IP Bindingリスト</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-item">
            <div id='x5' class="item no-act" onclick="toPage('./port.html')">LAN設定</div>
            <div class="hide">
                <div>
                    <div id='x51' class="item1 no-act" onclick="toPage('./port.html')">ポートフォワーディング</div>
                    <div class="hide">
                        <div class="item2 " id="port" onclick="toPage('./port.html')">ポートフォワーディング</div>
                        <div class="item2" id="port_list" onclick="toPage('./portList.html')">ポートフォワーディングリスト</div>
                    </div>
                </div>
                <div>
                    <div id='x52' class="item1 no-act" onclick="toPage('./ipFiltering.html')">IPパケットフィルタリング</div>
                    <div class="hide">
                        <div class="item2 " id="IP" onclick="toPage('./ipFiltering.html')">IPパケットフィルタリング</div>
                        <div class="item2 " id="IP_list" onclick="toPage('./ipList.html')">IPパケットフィルタリングリスト</div>
                    </div>
                </div>
                <div>
                    <div id='x54' class="item1 no-act" onclick="toPage('./ipv6Filtering.html')">IPv6パケットフィルタリング</div>
                    <div class="hide">
                        <div class="item2" id="IPV6">IPv6パケットフィルタリング</div>
                        <div class="item2" id="IPV6_list" onclick="toPage('./ipv6List.html')">IPv6パケットフィルタリングリスト</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-itm">
            <div id='x6' class="item no-act" onclick="toPage('./password.html')">端末設定</div>
            <div class="">
                <div>
                    <div class="">
                        <div class="item1" onclick="toPage('./password.html')">パスワード変更</div>
                        <div class="item1 choose" onclick="toPage('./dataTrafficSetting.html')">データ通信量設定</div>
                        <div class="item1" onclick="toPage('./offlineUpdate.html')">ソフトウェア更新</div>
                        <div class="item1" onclick="toPage('./reboot.html')">リセット</div>
                        <div class="item1" onclick="toPage('./deviceInformation.html')">デバイス情報</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="title">データ通信量設定</div>
        <div style="margin: 27px 0 29px 47px;">
            モバイルデータ使用量の警告の設定と、使用量の毎月のリセット日をSIMごとに設定できます。
        </div>
        <div class="test" >
            <div class="form-box">
                <table class="input-table">
                    <tbody>
                        <tr>
                            <th><label class="default-label" for="">SIMスロット</label></th>
                            <td>
                                <label style="display: block;">
                                    <input onclick="ap_band_click(0)" class="a-radio" type="radio" name="ap-band"
                                        value="0" checked><span class="b-radio"></span>SIM1
                                </label>
                                <label style="display: block;">
                                    <input onclick="ap_band_click(1)" class="a-radio" type="radio" name="ap-band"
                                        value="1"><span class="b-radio"></span>SIM2
                                </label>
                            </td>
                        </tr>
                    <tr>
                        <th><label class="default-label" for="">データ使用量の警告の設定</label></th>
                        <td>
                            <div style="display: flex;justify-content: space-between">
                                <div>
                                    <label >
                                        <input type="number" min="0" max="100" step="0.01" class="default-input" name="data"
                                               id="data" />
                                    </label>
                                </div>
                                <div>
                                    <select  name="ap-channel-hz24"  id="ap-channel-hz24" style="height: 38px;margin-left: 3px;">
                                        <option class="ap-channel-0" value="1">GB</option>
                                        <option class="ap-channel-0" value="2">MB</option>
                                    </select>
                                </div>
                                <div>

                                </div>
                            </div>

                        </td>
                    </tr>
                    <tr>
                        <th><label class="default-label" for="">毎月のリセット日</label></th>
                        <td>
                            <select class="default-select" name="password" id="password">
                                <option value="0">【選択】</option>
                                <option class="ap-channel-0" value="1">1</option>
                                <option class="ap-channel-0" value="2">2</option>
                                <option class="ap-channel-0" value="3">3</option>
                                <option class="ap-channel-0" value="4">4</option>
                                <option class="ap-channel-0" value="5">5</option>
                                <option class="ap-channel-0" value="6">6</option>
                                <option class="ap-channel-0" value="7">7</option>
                                <option class="ap-channel-0" value="8">8</option>
                                <option class="ap-channel-0" value="9">9</option>
                                <option class="ap-channel-0" value="10">10</option>
                                <option class="ap-channel-0" value="11">11</option>
                                <option class="ap-channel-0" value="12">12</option>
                                <option class="ap-channel-0" value="13">13</option>
                                <option class="ap-channel-0" value="14">14</option>
                                <option class="ap-channel-0" value="15">15</option>
                                <option class="ap-channel-0" value="16">16</option>
                                <option class="ap-channel-0" value="17">17</option>
                                <option class="ap-channel-0" value="18">18</option>
                                <option class="ap-channel-0" value="19">19</option>
                                <option class="ap-channel-0" value="20">20</option>
                                <option class="ap-channel-0" value="21">21</option>
                                <option class="ap-channel-0" value="22">22</option>
                                <option class="ap-channel-0" value="23">23</option>
                                <option class="ap-channel-0" value="24">24</option>
                                <option class="ap-channel-0" value="25">25</option>
                                <option class="ap-channel-0" value="26">26</option>
                                <option class="ap-channel-0" value="27">27</option>
                                <option class="ap-channel-0" value="28">28</option>
                                <option class="ap-channel-0" value="29">29</option>
                                <option class="ap-channel-0" value="30">30</option>
                                <option class="ap-channel-0" value="31">31</option>
                            </select>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="horizontal-button">
                    <div onclick="apConfigSet()" id="save-wifi" class="button-common">設定</div>
                </div>
<!--
                <div class="form-box" style="padding: 30px">
                    <div style="color: #333333; font:bold; font-size: 24px; border-bottom: 1px solid #000">現在の設定
                    </div>
                </div>
                <table class="input-table">
                    <tbody>
                    <tr>
                        <th><label class="default-label" for="">SIM 1</label></th>
                        <td id="dataShow">
                        </td>
                    </tr>
                    <tr>
                        <th><label class="default-label" for="">SIM 2</label></th>
                        <td id="dateShow">
                        </td>
                    </tr>
                    </tbody>
                </table>
-->
            </div>
        </div>
        <div class="contetn">

        </div>
    </div>
    <script src="./js/utils.js"></script>
    <script>

        window.onload = function () {
            getData()
            getSimNum()
        }

        function getSimNum() {
            var num = sessionStorage.getItem('activeSimNumber')
            if (num == 0) {
                var btn = document.getElementById('x2')
                btn.onclick = function() {}
                btn.style.backgroundColor = '#eee'
            }

            var params = {}
            Ajax.post(baseUrl + '/action/getActiveSimCardNumber', JSON.stringify(params), function(res) {
                var response = JSON.parse(res)
                if (response.status == 'success') {
                    sessionStorage.setItem('activeSimNumber', response.data.activeSimNumber)
                }
            })
        }

        function getData(){
            var params ={}
            Ajax.post(baseUrl + '/action/getDataUsage', JSON.stringify(params), function (res) {
                var response = JSON.parse(res)
                if (response.status == 'success') {
                    var data = response.data
                    var len = data.length
                    if(len == 1){
                        if(data.slot == '0'){
                            document.getElementById('dateShow').innerText = '番号'
                        }else{
                            document.getElementById('dataShow').innerText = '番号'
                        }
                    }else{
                        for(var i=0;i<data.length;i++){
                            if(data[i].slot == '0'){
                                document.getElementById('dataShow').innerText = data[i].warningData +' '+
                            ' data warning - Reset on monthly on day '+' '+data[i].cycleDay
                            }
                            if(data[i].slot == '1'){
                                document.getElementById('dateShow').innerText = data[i].warningData +' '+
                            ' data warning - Reset on monthly on day '+' '+data[i].cycleDay
                            }
                        }
                    }
                } else {
                    Message.showmsg(response.message)
                }
            })
        }

        function apConfigSet(){
            var dataNumber = document.getElementById('data').value
            var select = document.getElementById('ap-channel-hz24').value
            var limitData = Utils.GetSelectValue("password")

            if(!dataNumber){
                Message.info('データを空にすることはできません')
                return
            }
            if(!limitData){
                Message.info('日付を空にすることはできません')
                return
            }

            if(select == 1){
                dataNumber = (dataNumber*1024).toString()
            }
            if(select == 2){
                dataNumber = (dataNumber).toString()
            } 
            var params ={
                slot:Utils.GetRadioValue("ap-band"),
                warningData:dataNumber.toString(),
                cycleDay:limitData.toString()
            }
            Ajax.post(baseUrl + '/action/setDataUsage', JSON.stringify(params), function (res) {
                var response = JSON.parse(res)
                if (response.status == 'success') {
                    getData()
                    Message.showmsg(response.message)
                } else {
                    Message.showmsg(response.message)
                }
            })
        }

    </script>
</div>
</body>
</html>
